<template>
  <!-- 综艺剧集 -->
  <div class="itemList">
    <template v-for="(item, index) in dataList">
      <div :class="size == 'width' ? 'item_li' : 'item_he'" :key="index"
        :style="{ boxShadow: active == index ? 'rgba(202,38,250,0.8) 0px 0px 10px 5px' : '' }" @click="hanldClick(index)">
        <div>{{ item.title }}</div>
      </div>
    </template>
  </div>
</template>

<script>
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  components: {},
  props: {
    size: {
      type: String,
      default: 'width'
    },
    itemList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: 0
    }
  },
  computed: {
    dataList() {
      this.itemList.forEach(element => {
        element.title = getSubStr(element.title, 33, true)
      });
      return this.itemList
    }
  },
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    hanldClick(val) {
      this.active = val;
    }
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.itemList {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  .item_li {
    width: 355px;
    height: 45px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: rgba(23, 16, 50, 0.7);
  }

  .item_he {
    position: relative;
    top: -200px;
    left: 350px;
    width: 380px;
    height: 45px;
    line-height: 26px;
    text-align: center;
    font-size: 20px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: rgba(23, 16, 50, 0.7);
  }
}
</style>